<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/header.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title title-color">我的头像</h1>
		</header>
		
		<div class="mui-content">
			
			<div style="height: 300px; background-image:url(image/head-back.jpg) ;">
				
				<div style="padding-top: 100px; padding-left: 120px;" >
					<img src="css/registLogin/arrow.jpg"  id="img_face"
					style="width:100px; height:100px; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;"/>
					<h4 style="margin:0 auto">&nbsp;&nbsp;&nbsp;&nbsp;yuexia</h4>
				</div>
				
			</div>
			<br />
			
		    <div>
		    	<form class="mui-input-group">
				    <div class="mui-input-row">
				        <label>昵称</label>
				    	<input type="text" class="mui-input-clear" placeholder="请输入昵称">
				    </div>
				    <div class="mui-input-row">
				        <label>密码</label>
				        <input type="password" class="mui-input-password" placeholder="请输入密码">
				    </div>
				     <div class="mui-input-row">
				        <label>确认密码</label>
				        <input type="password" class="mui-input-password" placeholder="请输入密码">
				    </div>
				    <div class="mui-button-row">
				        <button type="button" class="mui-btn mui-btn-primary" id="update_user_info">更改信息</button>
				        
				</form>
		    	
		    </div>
		    
		    <div id="sheet-face" class="mui-popover mui-popover-bottom mui-popover-action ">
		        <!-- 可选择菜单 -->
		        <ul class="mui-table-view">
		          <li class="mui-table-view-cell">
		            <a id="select-phone" href="#">选择照片</a>
		          </li>
		          <li class="mui-table-view-cell">
		            <a id="download_face" href="#">下载头像</a>
		          </li>
		        </ul>
		        <!-- 取消菜单 -->
		        <ul class="mui-table-view">
		          <li class="mui-table-view-cell">
		            <a href="#sheet-face"><b>取消</b></a>
		          </li>
		        </ul>
		    </div>
		    
		</div>
		
		
		
		<script src="js/app.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function(){
				
				//获取全局用户对象
				var userInfo = app.getUserGlobalInfo();
				
//				var meWebView = plus.webview.currentWebview();

				//点击头像进入选项
				var img_face = document.getElementById("img_face");
				img_face.addEventListener("tap",function(){
					mui("#sheet-face").popover("toggle");
				});
				
				//选择照片点击事件
				var select_phone = document.getElementById("select-phone");
				select_phone.addEventListener("tap",function(){
					mui.openWindow({
						url: "plugin/v3.1.6/myface-uploader.html",
						id:"myface-uploader.html",
						createNew: true});
					mui("#sheet-myface").popover("toggle");
				});
				
				//下载头像
				var download_face = document.getElementById("download_face");
				download_face.addEventListener("tap",function(){
					alert("下载头像");
					
					mui("#sheet-myface").popover("toggle");
				});
				
				
				
				
				
				
				
				//更新资料按钮
				var update_user_info = document.getElementById("update_user_info");
				update_user_info.addEventListener("tap",function(){
					
					//获取输入框内容
					
					
				});
				
			});
			
		</script>
	</body>

</html>